<template>
  <div id="roleManagement">
    <LEFT>
      <!-- 将内容插入到 LEFT 组件的 other 区域 -->
      <template v-slot:otherContent>
        <div class="content">
          <div class="head">
            <el-form
              :inline="true"
              :model="formInline"
              class="demo-form-inline"
            >
              <el-form-item label="角色名称">
                <el-input
                  v-model="formInline.roleName"
                  placeholder="角色名称"
                ></el-input>
              </el-form-item>
              <el-form-item label="角色标识">
                <el-input
                  v-model="formInline.roleKey"
                  placeholder="角色标识"
                ></el-input>
              </el-form-item>
              <el-form-item label="创建者">
                <el-input
                  v-model="formInline.createBy"
                  placeholder="创建者"
                ></el-input>
              </el-form-item>
              <el-form-item label="账号状态">
                <el-select v-model="formInline.status" placeholder="账号状态">
                  <el-option label="禁用" value='0'></el-option>
                  <el-option label="启用" value='1'></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="创建时间">
                <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  v-model="formInline.createTime"
                  style="width: 100%"
                ></el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  size="small"
                  @click="onSubmit"
                  icon="el-icon-search"
                  >搜索</el-button
                >
              </el-form-item>
              <!-- 重置 -->
              <el-form-item>
                <el-button
                  size="small"
                  @click="resetForm()"
                  icon="el-icon-refresh-right"
                  >重置</el-button
                >
              </el-form-item>
            </el-form>
          </div>
          <div id="center">
            <!-- 新增按钮 -->
            <el-button
              type="primary"
              size="small"
              @click="handleAdd"
              style="margin-bottom: 20px"
              icon="el-icon-plus"
              >新增</el-button
            >
            <!-- 删除按钮 -->
            <el-button
              type="danger"
              @click="handleDelete"
              style="margin-bottom: 20px"
              size="small"
              icon="el-icon-delete"
              >删除</el-button
            >
            <!-- 清空按钮 -->
            <el-button
              type="danger"
              @click="handleClear"
              size="small"
              style="margin-bottom: 20px"
              icon="el-icon-delete"
              >清空</el-button
            >
            <!-- 导出按钮 -->
            <el-button
              type="warning"
              @click="handleExport"
              size="small"
              style="margin-bottom: 20px"
              icon="el-icon-download"
              >导出</el-button
            >
            <el-table
              v-loading="loading"
              ref="multipleTable"
              :data="tableData"
              stripe
              tooltip-effect="dark"
              style="width: 100%"
              :row-style="{ height: '5' }"
              :cell-style="{ padding: '0' }"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="55"></el-table-column>
              <el-table-column
                prop="id"
                label="角色编号"
                min-width="120"
                :show-overflow-tooltip="true"
              ></el-table-column>
              <el-table-column
                prop="roleName"
                label="角色名称"
                min-width="120"
                :show-overflow-tooltip="true"
              ></el-table-column>
              <el-table-column
                prop="roleKey"
                label="角色标识"
                min-width="120"
                :show-overflow-tooltip="true"
              ></el-table-column>
              <el-table-column
                prop="createBy"
                label="创建者"
                min-width="120"
                :show-overflow-tooltip="true"
              ></el-table-column>
              <el-table-column
                prop="status"
                label="角色状态"
                min-width="100"
                :show-overflow-tooltip="true"
              >
                <template slot-scope="scope">
                  <el-switch
                    v-model="scope.row.status"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    active-value="0"
                    inactive-value="1"
                    @change="handleStatusChange(scope.row)"
                  >
                  </el-switch>
                </template>
              </el-table-column>

              <el-table-column
                prop="createTime"
                label="创建时间"
                min-width="120"
                :show-overflow-tooltip="true"
              ></el-table-column>
              <!-- 编辑 -->
              <el-table-column
                label="操作"
                min-width="140"
                fixed="right"
                :show-overflow-tooltip="true"
              >
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    size="small"
                    @click="handleEdit(scope.row)"
                    icon="el-icon-edit"
                    >修改</el-button
                  >
                  <!-- 数据编辑 -->
                  <el-button
                    type="text"
                    size="small"
                    @click="handleUpdate(scope.row)"
                    icon="el-icon-edit"
                    >数据编辑</el-button
                    >
                    <!-- 删除 -->
                    <el-button
                      type="text"
                      size="small"
                      @click="Delete(scope.row)"
                      icon="el-icon-delete"
                      >删除</el-button
                    >
                </template>
              </el-table-column>
            </el-table>
            <el-dialog
              title="修改数据"
              :visible.sync="dialogVisible"
              width="30%"
              @close="handleClose"
            >
              <el-form :model="updateForm" label-width="80px">
                <el-form-item label="角色名字">
                  <el-input v-model="updateForm.roleName"></el-input>
                </el-form-item>
                <el-form-item label="角色标识">
                  <el-input v-model="updateForm.roleKey"></el-input>
                </el-form-item>
                <el-form-item label="角色状态">
                  <el-input v-model="updateForm.status"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" size="small" @click="handleSave">保存</el-button>
                  <el-button @click="handleClose" size="small">取消</el-button>
                </el-form-item>
              </el-form>
            </el-dialog>

            <el-dialog
              title="修改数据"
              :visible.sync="savedialogVisible"
              width="30%"
              @close="handleClose"
            >
              <el-form :model="postForm" label-width="80px">
                <el-form-item label="角色名字">
                  <el-input v-model="postForm.roleName"></el-input>
                </el-form-item>
                <el-form-item label="角色标识">
                  <el-input v-model="postForm.roleKey"></el-input>
                </el-form-item>
                <el-form-item label="角色状态">
                  <el-select v-model="postForm.status" placeholder="角色状态">
                    <el-option label="禁用" value='1'></el-option>
                    <el-option label="启用" value='0'></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="创建者">
                  <el-input v-model="postForm.createBy"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" size="small" @click="save">保存</el-button>
                  <el-button @click="handleClose" size="small">取消</el-button>
                </el-form-item>
              </el-form>
            </el-dialog>
   
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageNum"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
          </div>
        </div>
      </template>
    </LEFT>
  </div>
</template>
      
      <script>
import { onMounted } from "vue";
import LEFT from "../../components/left/index.vue";
import TOP from "../../components/top/index.vue";
export default {
  name: "role-management",
  components: {
    LEFT,
    TOP,
  },
  data() {
    return {
      formInline: {
        roleName: "",
        status: "",
        createTime: "",
        roleKey: "",
        createBy: "",
      },
      updateForm: {
        roleName: "",
        roleKey: "",
        status: "",
      },
      postForm: {
        roleName: "",
        roleKey: "",
        status: "",
        createBy: "",
      },
   
      dialogVisible: false,
      savedialogVisible: false,
      tableData: [],
      multipleSelection: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      loading: false,
      ids: [],
    };
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
      // 取出选中的数据的id
      this.ids = val.map((item) => item.id);
    },
    onSubmit() {
      this.getLoginLogData();
    },

    // 处理状态改变
    handleStatusChange(row) {
      // 这里可以发送请求到后端更新账号状态
      this.$http
        .put("/api/sysRole/updateStatus", {
          id: row.id,
          status: row.status,
        })
        .then((response) => {
          if (response.data.code === 200) {
            this.$message({
              message: "状态更新成功",
              type: "success",
            });
          } else {
            this.$message({
              message: "状态更新失败",
              type: "error",
            });
          }
        })
        .catch((error) => {
          console.error("Error updating status:", error);
        });
    },
    // 重置
    resetForm() {
      this.formInline = {
        ipaddr: "",
        username: "",
        status: "",
        time: "",
      };
    },
    // 编辑
    handleEdit(row) {
      this.dialogVisible = true;
      this.updateForm = row;
    },
    // 数据编辑
    handleUpdate() {
      console.log("数据编辑");
    },

    // 删除
    Delete(row) {
      this.$confirm("是否删除选中的数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http
            .delete("/api/sysUser/remove/" + row.id)
            .then((res) => {
              this.$message({
                message: res.data.msg,
                type: "success",
              });
              this.getLoginLogData();
            })
            .catch((error) => {
              console.error("Error deleting data:", error);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    // 新增
    handleAdd() {
      // 打开新增对话框或者表单
      this.savedialogVisible = true;
    },

    // 保存新增的角色
    save() {
      this.$http
        .post("/api/sysRole/add", this.postForm)
        .then((res) => {
          this.$message({
            message: res.data.msg,
            type: "success",
          });
        })
        .catch((error) => {
          console.error("Error saving data:", error);
        });
      // 保存成功后关闭对话框或者表单
      this.savedialogVisible = false;
      // 重新获取数据
      this.getLoginLogData();
    },
    // 保存编辑的数据
    handleSave() {
      this.$http
        .put("/api/sysRole/edit", this.updateForm)
        .then((res) => {
          this.$message({
            message: res.data.msg,
            type: "success",
          });
        })
        .catch((error) => {
          console.error("Error saving data:", error);
        });
      // 保存成功后关闭对话框或者表单
      this.dialogVisible = false;
      // 重新获取数据
      this.getLoginLogData();
    },
    handleClose() {
      this.dialogVisible = false;
      this.savedialogVisible = false;
    },
    // 删除
    handleDelete() {
      if (this.ids.length === 0) {
        this.$message({
          message: "请选择要删除的数据",
          type: "warning",
        });
        return;
      }
      this.$confirm("是否删除选中的数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http
            .delete("/api/sysUser/remove/" + this.ids)
            .then((res) => {
              this.$message({
                message: res.data.msg,
                type: "success",
              });
              this.getLoginLogData();
            })
            .catch((error) => {
              console.error("Error deleting data:", error);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 清空
    handleClear() {
      this.$message({
        message: "开发中",
        type: "info",
      });
    },
    // 导出
    handleExport() {
      this.$message({
        message: "开发中",
        type: "warning",
      });
    },
    //获取登录日志数据
    getLoginLogData() {
      // 开始加载状态
      this.loading = true;
      // 构建请求参数对象
      const params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };

      // 如果 formInline 的属性有值，则添加到 params 中
      if (
        this.formInline.roleName !== undefined &&
        this.formInline.roleName !== ""
      ) {
        params.roleName = this.formInline.roleName;
      }
      if (
        this.formInline.roleKey !== undefined &&
        this.formInline.roleKey !== ""
      ) {
        params.roleKey = this.formInline.roleKey;
      }
      if (
        this.formInline.createTime !== undefined &&
        this.formInline.createTime !== ""
      ) {
        params.createTime = this.formInline.createTime;
      }

      // 发送 GET 请求
      this.$http
        .get("/api/sysRole/list", { params })
        .then((res) => {
          console.log(res.data);
          // 对获取到的数据按 id 进行倒序排序
          this.tableData = res.data.rows.sort((a, b) => b.id - a.id);
          this.total = res.data.total;
        })
        .catch((error) => {
          console.error("Error fetching table data:", error);
        })
        .finally(() => {
          // 请求结束后停止加载状态
          this.loading = false;
        });
    },

    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.getLoginLogData();
    },
    handleCurrentChange(newPage) {
      this.pageNum = newPage;
      this.getLoginLogData();
    },
  },
  mounted() {
    this.getLoginLogData();
  },
};
</script>
      
      
      
      
      
  <style lang="less" scoped>
#roleManagement {
  background-color: #fff;

  /deep/ .right {
    // background-color: #fff;
  }
  /deep/ .el-input__inner {
    height: 30px;
  }
  /deep/ .el-form-item {
    margin-right: 22px;
  }
  /deep/ .el-form-item__label {
    font-weight: bold;
  }
  /deep/ .cell {
    color: #606266;
  }
  /deep/ .el-table .el-table__row {
    height: 50px; /* 这里设置每一行的高度 */
  }

  /deep/ .el-table .el-table__cell {
    line-height: 50px; /* 确保单元格内容垂直居中 */
  }
  /deep/ .el-pagination {
    float: right;
  }
}
</style>